import { OperateBase } from '../../common/operate-base';
import './font-family.less';
import { sureIcon } from '../../common/vars';
import { fontMap } from './font-map';
import { FontStylePlugin } from '../../../pugins/font-style.plugin';

function createFamilyOption(name: string, value: string) {
    let dom = document.createElement('div') as HTMLElement;
    dom.setAttribute('class', 'font-family-option-item');
    dom.setAttribute('zFamily', value);
    dom.innerHTML = `
        <div class="font-family-selected-icon">
        ${sureIcon}
        </div>
        <div>
        <div class="family-value-content">
        ${name}
        </div>
    `;
    return dom;
}
export class FontFamily extends OperateBase {
    protected fontStylePlugin: FontStylePlugin;
    protected container: HTMLElement;
    protected iconMap: {[key: string]: number} = {
        'icon-align-left':0,
        'icon-align-center':1,
        'icon-align-right':2
    }
    constructor() {
        super();
    }
    public afterDomInit(): void {
        this.zTableInstance.getHook().afterSelect.add((val) => {
            this.toggleDisabled(val !== null);
            this.disabled = val === null;
        });
        this.fontStylePlugin = this.zTableInstance.pluginManager.getPlugin(FontStylePlugin.pluginName);
        this.toggleDisabled(false);
    }
    protected toggleDisabled(isDisabled: boolean) {
        let ele: HTMLElement = this.container.querySelector('.z-tools-btn');
        this.disabled = !isDisabled;
        let btn: HTMLElement = this.container.querySelector('.z-tools-btn');
        if(!isDisabled) {
            ele.classList.add('z-table-icon-disabled');
            btn.classList.add('z-drop-down-disabled');
        } else {
            ele.classList.remove('z-table-icon-disabled');
            btn.classList.remove('z-drop-down-disabled');
        }
    }
    public selectChange() {

    }
    public getDom() {
        this.container = document.createElement('div');
        this.container.setAttribute('class', this.containerClassName);
        this.container.innerHTML=`
            <div class="z-table-tools-font-h z-font-family-container">
                <div class="z-tools-btn" >
                    <div class="z-font-size">微软雅黑</div>
                    <div class="icon-down"></div>
                </div>
                <div class="options" >
                    <div class="options-scroll-content">
                    </div>
                </div>
            </div>
        `;
        let tpl: any = document.createDocumentFragment();
        tpl.appendChild(this.container);
        let optionsContainer = this.container.querySelector('.options .options-scroll-content') as HTMLElement;
        for(let key in fontMap) {
            optionsContainer.append(createFamilyOption(fontMap[key], key));
        }
        // for(let size of FontSizeOptions) {
        //     
        // }
        this.container.querySelector('.icon-down').addEventListener('click', (e) => {
            if(this.disabled) return;
            (this.container.querySelector('.options') as HTMLElement).style.display = 'block';
            e.stopPropagation();
            e.preventDefault();
        });
        document.addEventListener('click', () => {
            (this.container.querySelector('.options') as HTMLElement).style.display = 'none';
        });
        this.container.addEventListener('click', (e) => {
            let ele = <HTMLElement>e.target;
            while(true) {
                if(ele.classList.contains('font-family-option-item')) {
                    let family = ele.getAttribute('zFamily');
                    if(family) {
                        this.fontStylePlugin.excute({family: family});
                    }
                    break;
                }
                if(ele.classList.contains('options') || ele.nodeName === 'BODY') {
                    break;
                } else {
                    ele =  ele.parentElement;
                }
            }
        });
        return tpl;
    }
    protected changeActive(val: number) {
        let iconEle = this.container.querySelector('.z-tools-icon').classList;
        let activeKey = '';
        for(let key in this.iconMap) {
            iconEle.remove(key);
            if(this.iconMap[key] === val) {
                activeKey = key;
            }
        }
        iconEle.add(activeKey);
        let optionsNodes = this.container.querySelectorAll('.font-h-item');
        optionsNodes.forEach(item => {
            if(Number(item.getAttribute('EHorizontally')) === val) {
                item.classList.add('font-h-item-active');
            } else {
                item.classList.remove('font-h-item-active');
            }
        })
    }
}